<template>
  <div class="departments">
    <el-card class="card">
      <template #header>
        <div>组织结构</div>
      </template>
      <div class="other-content">
        <tree-item :item="topInfo" :istop="true"></tree-item>
        <hr />
        <el-tree
          :data="treeData"
          :props="{ label: 'name' }"
          default-expand-all=""
        >
          <template v-slot="{ data }">
            <TreeItem :item="data" style="width: 100%;" @getData="getData"></TreeItem>
          </template>
        </el-tree>
      </div>
    </el-card>
    <Add :initList="initList" @getData="getData" />
  </div>
</template>

<script>
import TreeItem from '@/views/departments/components/treeItem.vue'
import { companyDepartment } from '@/api/department'
import Add from './components/Add.vue'
export default {
  components: { TreeItem, Add },
  data () {
    return {
      topInfo: {
        name: '传智教育',
        manager: '负责人',
        id: ''
      },
      treeData: [
        {
          name: '市场部',
          manager: '武高丽',
          children: [
            {
              manager: '张三',
              name: '北京事业部'
            }
          ]
        }
      ],
      initList: []
    }
  },
  async created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await companyDepartment()
      this.initList = res.data.depts
      this.topInfo.name = res.data.companyName
      this.treeData = this.changeData(res.data.depts, '')
      console.log(res)
    },
    changeData (arr, pid = '') {
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 15px;
  .card {
    padding: 15px;
    .el-card__body {
      padding: 40px 100px 10px;
    }
    .other-content {
      padding: 0 30px;
    }
  }
}
</style>
